@extends('home.layouts.base')

@section('title','首页')

@section("css")
    <link rel="stylesheet" href="/excel/css/handsontable.full.css">
    <style>
        #pageContent {width: 506px;	height: 519px;overflow: hidden;position:relative;}
        #imgContainer {width: 506px;height: 519px;}
        #positionButtonDiv {background: rgb(58, 56, 63);background: rgba(58, 56, 63, 0.8);border: solid 1px #100000;color: #fff;padding: 8px;text-align: left;position: absolute;right:35px;top:35px;}
        #positionButtonDiv .positionButtonSpan img {float: right;border: 0;}
        .positionMapClass area {cursor: pointer;}
        .zoomButton {border: 0;	cursor: pointer;}
        .zoomableContainer {background-image: url("/home/images/common/transparent.png");}
        .swiper-container {height: 48px;}
        .swiper-slide{
            height: 46px;
            border: 1px solid #DEDEDE;
            text-align: center;
            font-size: 12px;
            background: #f8fcff;
            /* Center slide text vertically */
            display: -webkit-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            -webkit-justify-content: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            -webkit-align-items: center;
            align-items: center;
        }
        .swiper-slide.slide-active{
            border-bottom: 1px solid #FFFFFF;
            background-color: #FFFFFF;
        }
        .execl-slide {
            height: 100%;
            display: none;
            overflow: hidden;
        }
        .execl-slide.execl-slide-active{
            display: block;
        }
        .execl-wrap{
            position: relative;
        }
    </style>
@endsection

@section("js")
    <script src="/home/js/lib/jquery/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
    <script src="/home/js/lib/swiper/swiper.js" type="text/javascript" charset="utf-8"></script>
    <script src="/home/js/lib/smartZoom/e-smart-zoom-jquery.min.js"></script>
    <script language="JavaScript" src="/excel/handsontable.full.js"></script>
    <script language="JavaScript" src="/excel/lodash.js"></script>
    <script language="JavaScript" src="/excel/underscore.string.js"></script>
    <script language="JavaScript" src="/excel/moment.js"></script>
    <script language="JavaScript" src="/excel/numeral.js"></script>
    <script language="JavaScript" src="/excel/numeric.js"></script>
    <script language="JavaScript" src="/excel/md5.js"></script>
    <script language="JavaScript" src="/excel/jstat.js"></script>
    <script language="JavaScript" src="/excel/formula.js"></script>
    <script language="JavaScript" src="/excel/parser.js"></script>
    <script language="JavaScript" src="/excel/ruleJS.js"></script>
    <script language="JavaScript" src="/excel/handsontable.formula.js"></script>
    <script type="text/javascript">
        var sheetsContainer = {

        };
        $(document).ready(function() {

            $.ajaxSetup({
                headers: { 'X-CSRF-TOKEN' : '{{ csrf_token() }}' }
            });

            $('#imageFullScreen').smartZoom({'containerClass':'zoomableContainer'});
            $('#topPositionMap,#leftPositionMap,#rightPositionMap,#bottomPositionMap').bind("click", moveButtonClickHandler);
            $('#zoomInButton,#zoomOutButton').bind("click", zoomButtonClickHandler);

            function zoomButtonClickHandler(e){
                var scaleToAdd = 0.8;
                if(e.target.id == 'zoomOutButton')
                    scaleToAdd = -scaleToAdd;
                $('#imageFullScreen').smartZoom('zoom', scaleToAdd);
            }
            function moveButtonClickHandler(e){
                var pixelsToMoveOnX = 0;
                var pixelsToMoveOnY = 0;

                switch(e.target.id){
                    case "leftPositionMap":
                        pixelsToMoveOnX = 50;
                        break;
                    case "rightPositionMap":
                        pixelsToMoveOnX = -50;
                        break;
                    case "topPositionMap":
                        pixelsToMoveOnY = 50;
                        break;
                    case "bottomPositionMap":
                        pixelsToMoveOnY = -50;
                        break;
                }
                $('#imageFullScreen').smartZoom('pan', pixelsToMoveOnX, pixelsToMoveOnY);
            }

            //新增意见反馈表格
            $(document).on('click','.feedback-table tr:last-child',function(){
                $(this).parents('.feedback-table').append($(this).clone(true));
            });

            var swiper = new Swiper('.swiper-container', {
                slidesPerView: 5,
                paginationClickable: true,
                spaceBetween: 10
            });

            $('.swiper-container').on('click','.swiper-slide',function(){
                var hidIndex = $('.swiper-container .slide-active').attr("keyIndex");
                var sidIndex = $(this).attr("keyIndex");
                $(this).removeClass('slide-active').addClass('slide-active').siblings().removeClass('slide-active');
                $( "#sheet_" + hidIndex + "_c").hide();
                $( "#sheet_" + sidIndex + "_c").show();
                $( "#sheet_" + sidIndex + "_c").addClass("execl-slide-active");
                $( "#sheet_" + hidIndex + "_f").hide();
                $( "#sheet_" + sidIndex + "_f").show();
                loadExcel(sidIndex);
            });

            function mkTitle(data){
                var arrayString = [];
                if(0 != data.row_confirm_1){
                    arrayString.push( "业主确认时间：" + data.row_confirm_1_at);
                }else{
                    arrayString.push( "业主未确认");
                }
                if(0 != data.row_confirm_2){
                    arrayString.push( "承包单位确认时间：" + data.row_confirm_2_at);
                }else{
                    arrayString.push( "承包单位未确认");
                }
                if(0 != data.row_confirm_3){
                    arrayString.push( "咨询单位确认时间：" + data.row_confirm_3_at);
                }else{
                    arrayString.push( "咨询单位未确认");
                }
                return arrayString.join(" ");
            }
            var key2border = ["bt" ,"br", "bb" ,"bl"];
            var border2style = {
                bt:["border-top-color" ,"border-top-width" ,"border-top-style"],
                br:["border-right-color" ,"border-right-width" ,"border-right-style"],
                bb:["border-bottom-color" ,"border-bottom-width" ,"border-bottom-style"],
                bl:["border-left-color" ,"border-left-width" ,"border-left-style"]
            };
            var Sheet = (function(config ,el ,width ,height){
                'use strict';
                var availableWidth;
                var availableHeight;
                var id = config.id;
                var confirm = function (id ,coords){
                    var hot = this;
                    $.ajax({
                        type: "get",
                        url: "{{ url('home/budget/confirm')}}/" + id,
                        dataType: 'json',
                        cache: false
                    })
                        .done(function (data) {
                            hot.getSourceDataAtRow(coords.row)[0] = data;
                            hot.setDataAtCell(coords.row,coords.col,"已确认","edit");
                        })
                        .fail(function (data) {
                            alert("出错啦！");
                        });
                };
                var render = function (instance, td, row, col, prop, value, cellProperties) {
                    Handsontable.renderers.TextRenderer.apply(this, arguments);
                    var data = instance.getSourceDataAtRow(row);
                    $(td).attr('title',mkTitle(data[0])); //empty is needed because you are rendering to an existing cell
                };
                var sheet_config = {
                    height:height,
                    width:width,
                    data: config.rows,
                    minSpareRows: 0,
                    colHeaders: true,
                    rowHeaders: true,
                    contextMenu: false,
                    manualColumnResize: true,
                    manualRowResize:true,
                    formulas: true,
                    mergeCells: config.mergeCells,
                    fixedColumnsLeft: 1,
                    manualColumnFreeze: true,
                    columns : config.columns,
                    cell: config.cell,
                    cells: function(row, col, prop) {
                        var cellProperties = {};
                        cellProperties.readOnly = true;
                        switch(col){
                            case 0:
                                cellProperties.className = "htCenter htMiddle";
                                cellProperties.renderer = render;
                                break;
                        }
                        return cellProperties;
                    },

                    beforeOnCellMouseDown: function(event, coords, TD){
                        var cell = sheet.getCell(coords.row  ,coords.col);
                        var text = $(cell).text();
                        var data = this.getSourceDataAtRow(coords.row);
                        switch(coords.col){
                            case 0:
                                //提交数据
                                var item = data[0];
                                if("确认" == text){
                                    confirm.call(this ,item.budget_row_id,coords);
                                }
                                break;
                            default:
                                if(text != this.getDataAtCell(coords.row  ,coords.col)){
                                    $("#gs").text("公式：" + this.getDataAtCell(coords.row  ,coords.col) );
                                }else{
                                    $("#gs").text("公式：无" );
                                }
                        }
                    },
                    afterRenderer:function(TD, row, col, prop, value, cellProperties){


                        if( cellProperties.color ){
                            if("clear" == cellProperties.color){
                                this.removeCellMeta(row, col, 'color');
                                $(TD).css({"background-color":""});
                            }else{
                                $(TD).css({"background-color": cellProperties.color});
                            }
                        }

                        var top = {
                            "border-top-width" : "",
                            "border-top-color" : "",
                            "border-top-style" : ""
                        }
                        var right = {
                            "border-right-width" : "",
                            "border-right-color" : "",
                            "border-right-style" : ""
                        }
                        var bottom = {
                            "border-bottom-width" : "",
                            "border-bottom-color" : "",
                            "border-bottom-style" : ""
                        }
                        var left = {
                            "border-left-width" : "",
                            "border-left-color" : "",
                            "border-left-style" : ""
                        }
                        var doStyle = false;

                        //上边框
                        if( cellProperties.btw ){
                            doStyle = true;
                            if( "clear" == cellProperties.btw ){
                                this.removeCellMeta(row, col, 'btw');
                            }else{
                                top = {
                                    "border-top-width" : cellProperties.btw.width || 1,
                                    "border-top-color" : cellProperties.btw.color || "#000",
                                    "border-top-style" : "solid"
                                }
                            }
                        }
                        if( cellProperties.brw ){
                            doStyle = true;
                            if( "clear" == cellProperties.brw ){
                                this.removeCellMeta(row, col, 'brw');
                            }else{
                                right = {
                                    "border-right-width" : cellProperties.brw.width || 1,
                                    "border-right-color" : cellProperties.brw.color || "#000",
                                    "border-right-style" : "solid"
                                }
                            }
                        }
                        if( cellProperties.bbw ){
                            doStyle = true;
                            if( "clear" == cellProperties.bbw ){
                                this.removeCellMeta(row, col, 'bbw');
                            }else{
                                bottom = {
                                    "border-bottom-width" : cellProperties.bbw.width || 1,
                                    "border-bottom-color" : cellProperties.bbw.color || "#000",
                                    "border-bottom-style" : "solid"
                                }
                            }
                        }
                        if( cellProperties.blw ){
                            doStyle = true;
                            if( "clear" == cellProperties.blw ){
                                this.removeCellMeta(row, col, 'blw');
                            }else{
                                left = {
                                    "border-left-width" : cellProperties.blw.width || 1,
                                    "border-left-color" : cellProperties.blw.color || "#000",
                                    "border-left-style" : "solid"
                                }
                            }
                        }

                        if( cellProperties.bts ){
                            doStyle = true;
                            if( "clear" == cellProperties.bts ){
                                this.removeCellMeta(row, col, 'bts');
                            }else{
                                if( top["border-top-width"] == ""){
                                    top["border-top-width"] = 1
                                }
                                if( top["border-top-color"] == ""){
                                    top["border-top-color"] = "#000"
                                }
                                if( cellProperties.bts.style ){
                                    top["border-top-style"] = cellProperties.bts.style
                                }
                                if( cellProperties.bts.color ){
                                    top["border-top-color"] = cellProperties.bts.color
                                }
                            }
                        }
                        if( cellProperties.brs ){
                            doStyle = true;
                            if( "clear" == cellProperties.brs ){
                                this.removeCellMeta(row, col, 'brs');
                            }else{
                                if( right["border-right-width"] == ""){
                                    right["border-right-width"] = 1
                                }
                                if( right["border-right-color"] == ""){
                                    right["border-right-color"] = "#000"
                                }
                                if( cellProperties.brs.style ){
                                    right["border-right-style"] = cellProperties.brs.style
                                }
                                if( cellProperties.brs.color ){
                                    right["border-right-color"] = cellProperties.brs.color
                                }
                            }
                        }
                        if( cellProperties.bbs ){
                            doStyle = true;
                            if( "clear" == cellProperties.bbs ){
                                this.removeCellMeta(row, col, 'bbs');
                            }else{
                                if( bottom["border-bottom-width"] == ""){
                                    bottom["border-bottom-width"] = 1
                                }
                                if( bottom["border-bottom-color"] == ""){
                                    bottom["border-bottom-color"] = "#000"
                                }
                                if( cellProperties.bbs.style ){
                                    bottom["border-bottom-style"] = cellProperties.bbs.style
                                }
                                if( cellProperties.bbs.color ){
                                    bottom["border-bottom-color"] = cellProperties.bbs.color
                                }
                            }
                        }
                        if( cellProperties.bls ){
                            doStyle = true;
                            if( "clear" == cellProperties.bls ){
                                this.removeCellMeta(row, col, 'bls');
                            }else{
                                if( left["border-left-width"] == ""){
                                    left["border-left-width"] = 1
                                }
                                if( left["border-left-color"] == ""){
                                    left["border-left-color"] = "#000"
                                }
                                if( cellProperties.bls.style ){
                                    left["border-left-style"] = cellProperties.bls.style
                                }
                                if( cellProperties.bls.color ){
                                    left["border-left-color"] = cellProperties.bls.color
                                }
                            }
                        }
                        if( doStyle ){
                            $(TD).css({
                                "border-top-style" : top["border-top-style"],
                                "border-top-color" : top["border-top-color"],
                                "border-top-width" : top["border-top-width"],
                                "border-right-style" : right["border-right-style"],
                                "border-right-color" : right["border-right-color"],
                                "border-right-width" : right["border-right-width"],
                                "border-bottom-style" : bottom["border-bottom-style"],
                                "border-bottom-color" : bottom["border-bottom-color"],
                                "border-bottom-width" : bottom["border-bottom-width"],
                                "border-left-style" : left["border-left-style"],
                                "border-left-color" : left["border-left-color"],
                                "border-left-width" : left["border-left-width"],
                            });
                        }

                    }
                };
                var      sheet = new Handsontable(el ,sheet_config);
                return this;
            });


            function loadExcel(index){
                var sheet = sheetsContainer["sheet_"+ index +"_c"];
                if(undefined == sheet) return;
                if( undefined != sheet){
                    if(null == sheet.hot){
                        sheet.hot = new Sheet( sheet.config ,document.getElementById("sheet_"+ index +"_c") ,488 ,410);
                    }
                }
            }

            $.ajax({
                type: "GET",
                url: "{{ url('home/budget/sheet') }}/{{$id}}",
                dataType: 'json',
                processData: false,
                contentType: "application/json",
                cache: false
            })
                .done(function (data) {
                    console.log(data);
                    for(var i = 0 ; i < data.length;i++){
                        sheetsContainer[ "sheet_"+ i +"_c" ] = {
                            config : data[i],
                            hot : null
                        };
                    }
                    loadExcel(0);
                })
                .fail(function (data) {
                    alert("获取数据失败");
                });


        });



        function emptyString(val){
            return val.length > 0;
        }
        function objections(id){
            var objectionData = {};
            objectionData.id = id;
            objectionData.data = [];
            $("#c_" + id +" tr[name='it']").each(function(i,el){
                var o = {};
                o.location      = $.trim($(this).find("textarea").eq(1).val());
                o.old_value     = $.trim($(this).find("textarea").eq(2).val());
                o.new_value     = $.trim($(this).find("textarea").eq(3).val());
                o.reason        = $.trim($(this).find("textarea").eq(4).val());
                o.remark        = $.trim($(this).find("textarea").eq(5).val());
                o.formula_id    = $.trim($(this).attr("id"));
                if(o.old_value != '' && o.old_value != '' &&
                    o.new_value != '' && o.reason != '' ){
                    objectionData.data.push( o );
                }
            });

            $("#mask").show();
            $.ajax({
                type: "POST",
                url: "{{ url('home/budget/objections') }}",
                dataType: 'json',
                processData: false,
                contentType: "application/json",
                cache: false,
                data: JSON.stringify(objectionData)
            })
                .done(function (data) {
                    window.location.reload(true);
                })
                .fail(function (data) {
                    alert("保存出错");
                });
        }




    </script>
@endsection

@section('content')
    <div class="main-container">
        <div class="bread-crumbs-wrap">
            <div class="main-module">
                <ul class="list-item clearfix">
                    <li><a href="/"><img src="/home/images/common/home-icon.png" width="14" height="14" class="mr15" /><span>首页</span></a></li>
                    <li class="ml25 mr25"><i class="fa fa-angle-right"></i></li>
                    <li><a href="/home/project/index"><span>项目列表</span></a></li>
                    <li class="ml25 mr25"><i class="fa fa-angle-right"></i></li>
                    <li><a href="/home/settlement/index?project_id={{$links['pid']}}"><span>{{$links['pname']}}</span></a></li>
                    <li class="ml25 mr25"><i class="fa fa-angle-right"></i></li>
                    <li><a href="javascript:;"><span>{{$links['cname']}}-工程预算</span></a></li>
                </ul><!--./list-item-->
            </div><!--./main-module-->
        </div><!--./bread-crumbs-wrap-->

        <div class="page531-wrap">
            <div class="main-module">
                <div class="page531-step-1 pt30 clearfix">
                    <div class="page531-cad-wrap fl">
                        <!--代码部分begin-->
                        <div id="pageContent">
                            <div id="imgContainer">
                                <img id="imageFullScreen" src="{{url($settlement['drawing'])}}" width="505px" height="520px"/>
                            </div>
                            <div id="positionButtonDiv">
                                <p><span> <img id="zoomInButton" class="zoomButton" src="/home/images/common/zoomIn.png" title="zoom in" alt="zoom in" /> <img id="zoomOutButton" class="zoomButton" src="/home/images/common/zoomOut.png" title="zoom out" alt="zoom out" /> </span> </p>
                                <p>
							        <span class="positionButtonSpan">
										<map name="positionMap" class="positionMapClass">
											<area id="topPositionMap" shape="rect" coords="20,0,40,20" title="move up" alt="move up"/>
							                <area id="leftPositionMap" shape="rect" coords="0,20,20,40" title="move left" alt="move left"/>
											<area id="rightPositionMap" shape="rect" coords="40,20,60,40" title="move right" alt="move right"/>
											<area id="bottomPositionMap" shape="rect" coords="20,40,40,60" title="move bottom" alt="move bottom"/>
										</map>
										<img src="/home/images/common/position.png" usemap="#positionMap" />
							         </span>
                                </p>
                            </div>
                        </div>
                        <div class="btn-group mt25">
                            <a target="_blank" href="{{url($settlement['drawing'])}}"><button class="btn orange-btn">查看图纸</button></a>
                        </div>
                    </div>
                    <div class="page531-execl-wrap fr clearfix">
                        <div class="execl-box">
                            <!-- Swiper -->
                            <div class="swiper-container">
                                <div class="swiper-wrapper">
                                    @foreach ($sheetnames as $key => $sheet_name)
                                        @if($key == 0)
                                            <div keyIndex="{{$key}}" id="sheet_{{$key}}" cid="sheet_{{$key}}_c" class="swiper-slide slide-active">{{ $sheet_name }}</div>
                                        @else
                                            <div keyIndex="{{$key}}" id="sheet_{{$key}}" cid="sheet_{{$key}}_c" class="swiper-slide">{{ $sheet_name }}</div>
                                        @endif
                                    @endforeach
                                </div>
                            </div><!--./swiper-container-->
                            <div class="execl-wrap">
                                <div id="gs" style="height: 50px; line-height: 50px; background-color: #00acd6">公式：</div>
                                @foreach ($sheetnames as $key=>$sheet_name)
                                    @if($key == 0)
                                        <div id="sheet_{{$key}}_c" class="execl-slide execl-slide-active"></div>
                                    @else
                                        <div id="sheet_{{$key}}_c" class="execl-slide"></div>
                                    @endif
                                @endforeach
                            </div><!--./execl-wrap-->
                        </div>
                        <div class="btn-group mt25 tr">
                            <a target="_blank" href="/home/budget/show/{{$settlement['id']}}"><button class="btn orange-btn">查看EXCEL</button></a>
                        </div><!--./btn-group-->
                    </div><!--./page531-execl-wrap-->
                </div><!--./page531-step-1-->
            </div><!--./main-module-->

            <div class="main-module">
                <div class="feedback-wrap pb100 pt40">
                    <hr color="e9e9e9" class="mb30"/>
                    <h4 class="title f18 mb30">计算文件有异议部分：</h4>
                    @foreach ($formulas as $key=>$formula)
                        <div class="feedback-form-container" @if($key > 0) style="display: none;" @endif  id="sheet_{{$key}}_f">
                            <table id="c_{{$formula["id"]}}" class="feedback-table" border="0" cellspacing="0" cellpadding="0">
                                <tr>
                                    <th width="116">序号</th>
                                    <th width="140">单元格位置</th>
                                    <th width="180">原值、公式</th>
                                    <th width="160">新值、公式</th>
                                    <th width="200">修改原因</th>
                                    <th width="130">备注</th>
                                    <th width="100">状态</th>
                                </tr>
                                @foreach ($formula['formulas'] as $key2=>$row)
                                    <tr name="it" id="{{$row['formula_id']}}">
                                        <td width="116" style="text-align: center;"> {{$key2 + 1}}</td>
                                        <td width="140"><textarea name="" rows="" cols="">{{$row['location']}}</textarea></td>
                                        <td width="180"><textarea name="" rows="" cols="">{{$row['old_value']}}</textarea></td>
                                        <td width="160"><textarea name="" rows="" cols="">{{$row['new_value']}}</textarea></td>
                                        <td width="200"><textarea name="" rows="" cols="">{{$row['reason']}}</textarea></td>
                                        <td width="130"><textarea name="" rows="" cols="">{{$row['remark']}}</textarea></td>
                                        <td width="100"><textarea name="" rows="" cols="">{{$row['status']}}</textarea></td>
                                    </tr>
                                @endforeach
                                <tr name="it" id="0">
                                    <td width="116"><textarea name="" rows="" cols=""></textarea></td>
                                    <td width="140"><textarea name="" rows="" cols=""></textarea></td>
                                    <td width="180"><textarea name="" rows="" cols=""></textarea></td>
                                    <td width="160"><textarea name="" rows="" cols=""></textarea></td>
                                    <td width="200"><textarea name="" rows="" cols=""></textarea></td>
                                </tr>
                            </table><!--./feedback-table-->
                            <div class="feedback-btn mt20 tr">
                                <button type="button" onclick="objections({{$formula["id"]}})">提交修改意见</button>
                            </div><!--./feedback-btn-->
                        </div><!--./feedback-form-container-->
                    @endforeach
                </div><!--./feedback-wrap-->
            </div><!--./main-module-->
        </div><!--./page531-wrap-->

    </div><!--./end main-->
    <div id="mask" style="position: fixed;top:0;height: 100%;width: 100%;opacity: 0.5;background-color: #0c0c0c;display: none;z-index: 999999"></div>
@endsection